
        <template>
  <div>
    <div id="box">
      <div class="box2">
        <div class="div0">待办事项（单位：条）</div>
        <div
          style="cursor: pointer"
          class="box1"
          @click="
            () => {
              this.$router.push('/company/ApprovalManagement');
            }
          "
        >
          <div class="box">
            <div class="div1">
              {{ msg }}
            </div>
            <div class="div2">职称申报</div>
            <div class="div3">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
          </div>
        </div>
        <div
          style="cursor: pointer"
          class="box1"
          @click="
            () => {
              this.$router.push('/Register/PersonalRegister');
            }
          "
        >
          <div class="box">
            <div class="div1">
              {{ msg }}
            </div>
            <div class="div2">专技人才注册</div>
            <div class="div3">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
          </div>
        </div>
        <div
          style="cursor: pointer"
          class="box1"
          @click="
            () => {
              this.$router.push('/ApprovalManagement/MigrationIn');
            }
          "
        >
          <div class="box">
            <div class="div1">
              {{ msg }}
            </div>
            <div class="div2">专技人才迁入</div>
            <div class="div3">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
          </div>
        </div>
        <div
          style="cursor: pointer"
          class="box1"
          @click="
            () => {
              this.$router.push('/ApprovalManagement/MigrationOut');
            }
          "
        >
          <div class="box">
            <div class="div1">
              {{ msg }}
            </div>
            <div class="div2">专技人才迁出</div>
            <div class="div3">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="bBox">
        <div class="div0">我发起的（单位：条）</div>
        <div class="box1">
          <div class="box">
            <div class="div1">
              {{ msg }}
            </div>
            <div class="div2">用人单位注册</div>
            <div class="div3">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
          </div>
        </div>
        <div
          style="cursor: pointer"
          class="box1"
          @click="
            () => {
              this.$router.push('/ApprovalManagement/MigrationOut');
            }
          "
        >
          <div class="box">
            <div class="div1">
              {{ msg }}
            </div>
            <div class="div2">专业人才迁出</div>
            <div class="div3">
              <i class="el-icon-shopping-bag-2"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="box2">
        <div class="div0">本年度职称评审管理</div>
        <div>
          <div class="boxZhuan">专技人员</div>
          <div class="boxShu">11(人)</div>
        </div>
        <div>
          <div class="boxZhuan">申报人数</div>
          <div class="boxShu">5(人)</div>
        </div>
      </div>
      <div>
        <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
        <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
        <div id="main" style="width: 600px; height: 400px"></div>
      </div>
      <div id="decBox">
        <div id="decBox1">
          <div>申报人数</div>
          <div>25</div>
        </div>

        <div id="main1" style="width: 400px; height: 300px"></div>
      </div>
    </div>
  </div>
</template>



<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      msg: 20,
    };
  },
  name: "About",
  components: {
    // HelloWorld
  },
  mounted() {
    this.chart();
    sessionStorage.setItem("fName", "CompanyHome");
    this.$axios({
      url: "/123/",
      method: "post",
      data: {
        shenBao: this.shenBao,
        zhuanJ: this.zhuanJ,
        zhuanR: this.zhuanR,
        zhuanC: this.zhuanC,
        yongrenZ: this.yongrenZ,
      },
    }).then((res) => {
      console.log(res);
    });
  },
  methods: {
    chart() {
      var myChart = echarts.init(document.getElementById("main"));
      var myChart1 = echarts.init(document.getElementById("main1"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["申报人数", "通过人数"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "申报人数(人)",
            min: 0,
            max: 40,
            interval: 5,
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "通过人数(人)",
            min: 0,
            max: 16,
            interval: 2,
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            name: "申报人数",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          // {
          //     name: '降水量',
          //     type: 'bar',
          //     data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          // },
          {
            name: "通过人数",
            type: "line",
            yAxisIndex: 1,
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      });
      myChart1.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1, name: "通过人数" },
              { value: 3, name: "未通过人数" },
            ],
          },
        ],
      });
    },
  },
};
</script>


<style lang="less" scoped>
#decBox1 {
  height: 200px;
  width: 200px;
  border: 1px solid white;
  border-radius: 200px;
  background-color: #c7c7c7;
  margin-left: 100px;
  text-align: center;
  line-height: 100px;
}
#decBox {
  float: left;
  margin-top: -640px;
  border: 1px solid #c7c7c7;
  width: 430px;
  height: 600px;
  margin-left: 850px;
}
#box {
  .boxZhuan {
    background-color: #f2f2f2;
    width: 120px;
    height: 90px;

    color: #c7c7c7;
    margin-left: 30px;
    margin-top: 40px;
    text-align: center;
    line-height: 90px;
    font-size: 20px;
    float: left;
  }
  .boxShu {
    border: solid 1px #c7c7c7;
    width: 220px;
    height: 86px;

    color: #c7c7c7;

    margin-top: 40px;
    text-align: center;
    line-height: 90px;
    font-size: 20px;
    float: left;
  }

  .box2 {
    border: 1px solid #c7c7c7;
    width: 400px;
    height: 240px;
    margin-top: 30px;
  }
  .bBox {
    float: left;
    margin-top: -240px;
    border: 1px solid #c7c7c7;
    width: 430px;
    height: 240px;
    margin-left: 850px;
  }
  .div0 {
    font-weight: bold;
    margin-top: 20px;
    margin-left: 50px;
  }
  .box1 {
    float: left;
    margin-right: 20px;
  }
  .box {
    width: 150px;
    height: 115px;
    background-color: #c7c7c7;
    border-radius: 10px;
    margin-top: 30px;
    margin-left: 20px;
  }
  .div1 {
    font-size: 30px;
    color: white;
    margin-left: 30px;
    margin-top: 30px;
    float: left;
  }
  .div2 {
    color: white;
    float: left;
    margin-left: -50px;
    margin-top: 70px;
  }
  .div3 {
    font-size: 25px;
    float: right;
    margin-right: 8px;
  }
  .box2 {
    border: 1px solid #c7c7c7;
    width: 800px;
    height: 240px;
  }
}
</style>